<template>
	<view class="content">
		<view class="header">
			<view class="goBack" @click="goBack()">
				<image src="../../static/img/back.png" mode="" style="width: 13rpx; height: 23rpx;"></image>
			</view>
			<view class="input_box">
				<input type="search" v-model="search" id="searchInput" autofocus @confirm="searchData()" placeholder="搜索" placeholder-style="font-size:26rpx;color:#999;" />
				<uni-icons class="search_icon search" type="search" color="#999" size="18"></uni-icons>
				<uni-icons class="search_icon clear" @click="clearItem()" v-if="search" type="clear" color="#999" size="18"></uni-icons>
			</view>
		</view>
		<template v-if="isSearch">
			<view class="recommend" v-if="SearchHot.length" 
			>
				<view class="recommend_title">
					热门推荐
				</view>
				<view class="recommend_content">
					<view class="recommend_content_item"v-for="(item,index) in SearchHot" :key="index">
						<text  style="color:#FF7331">{{item}}</text>
						<image src="../../static/img/re.png" mode="" style="width:13rpx; height: 17rpx;"></image>
					</view>
					
				</view>
			</view>
			<view class="search_history">
				<view class="search_title">
					<text>搜索历史</text>
					<uni-icons type="trash" size="15" color="#9F9F9F" @click="clearHistory" v-if="history_list.length"></uni-icons>
				</view>
				<view class="search_history_item" v-for="(item,index) in history_list" @click="searchAlign(item)" :key="index">
					{{item}}
				</view>
			</view>
		
			<view class="search_result">
				<view class="occupancy_list_item" v-if="records.length">
					<image src="../../static/img/gq.png" mode="" style="width: 182rpx;height: 172rpx;"></image>
					<view class="occupancy_rt">
						<view class="occupancy_rt_title">
							<text>小画家素质美育中心</text>
							<image src="../../static/img/Collection_out.png" mode="" style="width: 27rpx;height: 27rpx;"></image>
						</view>
						<view class="search_label">
							<text>少儿美术</text>
						</view>
						<view class="occupancy_rt_address">
							<image src="../../static/img/age.png" mode="" style="width: 22rpx;height: 20rpx;"></image>
							<text>招生年龄段：3-18岁</text>
						</view>
						<view class="occupancy_browse">
							<view>
								山东临沂市561.12km
							</view>
							<view >
								<image src="../../static/img/browse.png" mode="" style="width: 26rpx;height: 20rpx;"></image>
								<text>1.77万人浏览</text>
							</view>
							
						</view>
						
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="noData">
				<view class="noDataImg">
					<image src="../../static/img/noData.png" mode="" style="width: 298rpx;height: 339rpx;"></image>
				</view>
				<view class="noDataTitle">
					<view>暂无数据</view>
					<view>找不到相关数据</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				isSearch:true,
				search:"",
				recommend_list:[{
					title:"课程名称",
					isHeat:true
				},{
					title:"课程名称",
					isHeat:true
				},{
					title:"课程名称",
					isHeat:false
				}],
				records:[],//搜索的内容
				pageSize:10,
				pageRow:1,
				history_list:[],
				SearchHot:[],//热门推荐
				cityCode:'110101',
				type:'',//搜索类型
				data:{},//接受地址传来的数据
			}
		},
		onLoad(data) {
			this.data=data;
		},
		onShow() {
			
			if(uni.getStorageSync('search')){
				this.history_list=JSON.parse(uni.getStorageSync('search'));
			}else{
				this.history_list=[];
			}
			
			
			this.getSearchHot();
		},
		
		methods:{
			//热门推荐
			getSearchHot(){
				this.$http.get('/api/dream/searchHot',{
					
				}).then((data)=>{
					if(data.data.code==200){
						this.SearchHot=data.data.result;
					}else{
						this.SearchHot=[]
					}
				})
			},
			//再次搜索
			searchAlign(item){
				this.search=item;
				this.searchData();
			},
			//清除缓存
			clearHistory(){
				  uni.removeStorageSync('search');
			},
			//清楚输入内容
			clearItem(){
				console.log(123)
				this.search="";
				this.isSearch=true;
			},
			//搜索内容
			searchData(){
				if(this.search){
					let url="";
					let method="get";
					let params={};
				
					if(this.data.type==0){//首页搜索
						url="/api/dream/mechanismPage";
						method='get';
						params={
							areaCode:this.cityCode,
							pageType:0,
							name:this.search,
							pageRow:this.pageRow,
							pageSize:this.pageSize
						}
					}else if(this.data.type==1){//科目搜索
						url="/api/mechanism/mchanismList"
						method='post';
						params={
							    "areaCode": this.cityCode,
								"moldId": this.data.mid,
								"name": this.search,
								pageRow:this.pageRow,
								pageSize:this.pageSize,
								"sort": ""
						}
					}else if(this.data.type==2){
						url="/api/dream/moldMechanism"
						method='get';
						params={
							    "areaCode": this.cityCode,
								"moldId": this.data.mid,
								"name": this.search,
								pageRow:this.pageRow,
								pageSize:this.pageSize
						}
					}
					this.$http[method](url,{
						...params
					},method=='post'?'application/json':'').then((data)=>{
						if(data.data.code==200){
							if(data.data.result){
								this.records=data.data.result.records||[];
								if(!this.records.length){
									this.isSearch=false;
								}else{
									this.isSearch=true;
								}
								
							}else{
								this.isSearch=false;
								this.records=[]
							}
							console.log(this.history_list)
							let hasItem=false;
							this.history_list.forEach((item)=>{
								if(item==this.search){
									hasItem=true;
								}
							})
							console.log(hasItem)
							if(!this.history_list.length||!hasItem){
								this.history_list.push(this.search);
								uni.setStorageSync('search', JSON.stringify(this.history_list));
							}
							 
						}else{
							this.records=[];
							uni.showToast({
								title: data.data.message,
								icon: "none",
								duration: 2000,
								
							});
						}
					})
				}else{
					uni.showToast({
						title: '请输入要搜索的内容!',
						icon: "none",
						duration: 2000,
						
					});
				}
			},
			goBack(){
				if(this.data.type==0){
					uni.switchTab({
					    url: '/pages/index/index'
					});
				}else if(this.data.type==1){
					uni.switchTab({
					    url: '/pages/subject/index'
					});
				}else if(this.data.type==2){
					uni.navigateBack();
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/search.scss'
</style>
